import React from 'react'
import AIModelIcon from '../icon/aiModel-icon'
import FunctionalDropdown from './FunctionalDropdown'
import { useModel } from '@/components/ModelProvider'
import { models } from '@/config/model'

const EditorFunctional: React.FC = () => {
  const { currentModel, setCurrentModel } = useModel()

  return (
    <div className='flex space-x-2'>
      {/* 模型切换 */}
      <FunctionalDropdown
        dropdownMenu={[
          ...models.map((model) => ({
            name: model.name,
            value: model.model,
            description: model.description
          }))
        ]}
        icon={<AIModelIcon />}
        currentIndex={models.findIndex(model => model.model === currentModel.model)}
        handleSelect={(item) => {
          const model = models.find((model) => model.model === item.value)
          if (model) {
            setCurrentModel(model)
          }
        }}
      />
    </div>
  )
}

export default EditorFunctional